import { log } from "console";
import { Component, ReactNode } from "react";

// 1. 事件
// 2. 表单
// 3. 生命周期
// 4. axios
export default class App extends Component {
  //只推荐1和3
  btn2(){
    console.log("点击了2"+this);//普通函数拿不到
  }
  // 箭头函数可以拿到this
  btn3=()=>{
    console.log("点击了3"+this);
  }
  btn4(){
    console.log("点击了4"+this);
  }
  btn5=()=>{
    console.log("点击了5"+this);
  }
  render(): ReactNode {
    return (
      <>
        <h1>Hello World</h1>

        <button onClick={() => {
          console.log("点击了1"+this);
        }}>按钮1</button>
        <button onClick={this.btn2}>按钮2</button>
        <button onClick={this.btn3}>按钮3</button>
        <button onClick={()=>{
          this.btn4()
        }}>按钮4</button>
         <button onClick={()=>{
          this.btn5()
        }}>按钮5</button>
        <button onClick={function (this:App){
          console.log("点击了6"+this);
          // 拿不到this
        }}>按钮6</button>
      </>
    );
  }
}
